<template>
  <el-dialog :title="formData.id?'修改角色':'添加角色'" :visible.sync="isShow" width="40%" @close="close">
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入角色名称" />
      </el-form-item>

      <el-form-item label="角色描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入角色名称"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="角色权限">
        <el-tree
          ref="tree"
          :props="props"
          :data="tableData"
          show-checkbox
          node-key="id"
        />
      </el-form-item>

      <el-form-item>
        <el-row type="flex" justify="end">
          <el-button size="small" @click="isShow = false">取消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="onSubmit"
          >确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getSysMenuListApi } from '@/api/system'
import { addRoleApi, editRoleInfoApi, getRoleInfoApi } from '@/api/role'
// import { deepTraverse } from '@/utils'
export default {
  data() {
    return {
      isShow: false,
      props: {
        label: 'title',
        children: 'children'
      },
      tableData: [],
      formData: {
        'name': '',
        'description': '',
        'menuids': [

        ]
      },
      rules: {
        name: [{ required: true, message: '必须', trigger: 'blur' }],
        description: [{ required: true, message: '必须', trigger: 'blur' }]
      },
      keyArray: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getSysMenuListApi()
      this.tableData = res
    },

    async onSubmit() {
      // 返回目前被选中的节点的 key 所组成的数组 this.$refs.tree.getCheckedKeys()
      // try {
      await this.$refs.form.validate()
      if (this.$refs.tree.getCheckedKeys().length === 0) return this.$message.warning('请选择菜单权限')
      // this.formData.menuids = this.$refs.tree.getCheckedKeys()
      this.formData.menuids = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
      this.formData.id ? await editRoleInfoApi(this.formData) : await addRoleApi(this.formData)
      this.formData.id ? this.$message.success('修改成功') : this.$message.success('添加成功')
      this.isShow = false
      this.$emit('updateList')
      // } catch (err) {
      //   console.log(err)
      // }
    },
    close() {
      this.$refs.form.clearValidate()
      this.formData = {
        'name': '',
        'description': '',
        'menuids': []
      }
      this.$refs.tree.setCheckedKeys([])
      this.keyArray = []
    },
    // 获取所有叶子节点的id
    getChildCheck(list) {
      list.forEach(item => {
        if (item.children && item.children.length) {
          this.getChildCheck(item.children)
        } else {
          this.keyArray.push(item.id)
        }
      })
    },
    // 回显
    async  redrawView(id) {
      const res = await getRoleInfoApi(id)
      this.formData = res
      this.isShow = true
      // todo 回显数 方法1  获取所有节点 全选半选回显
      // const arr = []
      // deepTraverse(res.authList, node => {
      //   arr.push(node.id)
      // })
      // // 回显选择得节点
      // this.$nextTick(() => {
      //   arr.forEach(item => this.$refs.tree.setChecked(item, true))
      // })
      // todo 回显数 方法2 获取最深的节点id 及全部全选节点
      this.$nextTick(() => {
        this.getChildCheck(res.authList)
        console.log(this.keyArray)
        this.$refs.tree.setCheckedKeys(this.keyArray)
      })
    }

  }

}
</script>

<style>
</style>
